import { ProjectListTem } from '../Template'
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'

import { Column } from '@ant-design/plots'
import { complexColumnTemplate } from '../Template'
import { useRef } from 'react'
import { useRequest, useSize, useEventEmitter } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState } from 'react'
import { insertCharacter } from '../../../../Common/Configure/Common'

export const EleA01 = () => {
    // const ChartOne = useRef()
    // const SizeOne = useSize(ChartOne)
    // const ChartTwo = useRef()
    // const SizeTwo = useSize(ChartTwo)

    // const [Active, setActive] = useState()

    // const { runAsync: getOne } = useRequest(Http, {
    //     manual: true,
    //     onSuccess: res => {
    //         let data = []
    //         res.forEach(({ tableName, standardCount, entryCount }) => {
    //             let label = tableName.length > 4 ? insertCharacter(tableName, '\n', 4) : tableName
    //             data = [
    //                 ...data,
    //                 { type: '计划数', label: label, value: standardCount },
    //                 { type: '进场数', label: label, value: entryCount },
    //             ]
    //         })
    //         setDataOne(data)
    //     },
    // })

    // const { runAsync: getTwo } = useRequest(Http, {
    //     manual: true,
    //     onSuccess: res => {
    //         let data = []
    //         res.forEach(({ planDate, standardCount, entryCount }) => {
    //             data = [
    //                 ...data,
    //                 { type: '计划数', label: planDate, value: standardCount },
    //                 { type: '进场数', label: planDate, value: entryCount },
    //             ]
    //         })
    //         setDataTwo(data)
    //     },
    // })

    // useEffect(() => {
    //     if (Active) {
    //         getOne({ url: 'getJTGJMachineTypeList', data: { organizationUuid: Active } })
    //         getTwo({ url: 'getJTGJMachineMonthList', data: { organizationUuid: Active } })
    //     }
    // }, [getOne, getTwo, Active])

    // const ActiveEvent = useEventEmitter()
    // ActiveEvent.useSubscription(val => setActive(val))

    // const [DataOne, setDataOne] = useState()
    // const [DataTwo, setDataTwo] = useState()

    return (
        <>
            <iframe
                title="Video"
                src="https://www.hljgskf.com/s/kb/main"
                width="100%"
                height="100%"
                scrolling="no"
                frameBorder="0"
                allowFullScreen={true}
            />
            {/* <ProjectListTem type={1} ActiveEvent={ActiveEvent} />
            <div className="Right" style={{ flex: 1230 }}>
                <CommonSmallTitle title="按类别统计" style={{ marginBottom: 16 }}>
                    <div className="one" ref={ChartOne}>
                        {SizeOne && DataOne && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeOne,
                                    data: DataOne,
                                    color: ['rgba(155, 253, 254, 1)', 'rgba(255, 212, 123, 1)'],
                                    isGroup: true,
                                    yTitle: '台',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="按月统计">
                    <div className="two" ref={ChartTwo}>
                        {SizeTwo && DataTwo && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeTwo,
                                    data: DataTwo,
                                    color: ['rgba(155, 253, 254, 1)', 'rgba(255, 212, 123, 1)'],
                                    isGroup: true,
                                    yTitle: '台',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div> */}
        </>
    )
}
